<template>
  <a-modal
    :visible="visible"
    :afterClose="hanldeAfterClose"
    @cancel="handleCancel"
    @ok="handleOk"
    :confirmLoading="isSubmiting"
    title="修改异动"
  >
    <a-form :form="form" :labelCol="{ span: 6 }" :wrapperCol="{ span: 18 }">
      <a-form-item label="异动编号">
        <a-input disabled v-decorator="['ApplyNo']" placeholder="请输入异动编号"> </a-input>
      </a-form-item>
      <a-form-item label="申请人">
        <a-input disabled v-decorator="['Proposer']" placeholder="请输入申请人"> </a-input>
      </a-form-item>
      <a-form-item label="身份证号">
        <a-input disabled v-decorator="['IDCard']" placeholder="请输入身份证号"> </a-input>
      </a-form-item>
      <a-form-item label="异动类型">
        <a-select
          v-decorator="['YDLX', { rules: [{ required: true, message: '请选择异动类型' }] }]"
          placeholder="请选择异动类型"
          :options="typeOptions"
        ></a-select>
      </a-form-item>
      <a-form-item label="现保障人口" v-if="form.getFieldValue('YDLX') === '变更'">
        <a-input
          type="number"
          v-decorator="['XBZRK', { rules: [{ required: true, message: '请输入现保障人口' }] }]"
        ></a-input>
      </a-form-item>
      <a-form-item label="现人均住房面积" v-if="form.getFieldValue('YDLX') === '变更'">
        <a-input
          type="number"
          v-decorator="['XRJZFMJ', { rules: [{ required: true, message: '请输入现人均住房面积' }] }]"
        ></a-input>
      </a-form-item>
      <a-form-item label="异动原因">
        <a-textarea
          v-decorator="['YdReason', { rules: [{ required: true, message: '请输入异动原因' }] }]"
          placeholder="请输入异动原因"
          :auto-size="{ minRows: 3, maxRows: 5 }"
        ></a-textarea>
      </a-form-item>
    </a-form>
  </a-modal>
</template>

<script>
import { yearPicker } from '@/components'
import { postYdsb } from '@/api/common'
import pick from 'lodash.pick'
export default {
  components: {
    yearPicker,
  },
  props: {
    visible: {
      type: Boolean,
      default: false,
    },
    data: {
      type: Object,
      default: () => {},
    },
  },
  watch: {
    visible(n) {
      if (n) {
        this.fetchData()
      }
    },
  },
  data() {
    return {
      form: this.$form.createForm(this, { name: 'plan' }),
      isSubmiting: false,
      typeOptions: [
        {
          label: '退出',
          value: '退出',
        },
        {
          label: '变更',
          value: '变更',
        },
      ],
    }
  },
  methods: {
    fetchData() {
      this.$nextTick(() => {
        this.form.setFieldsValue(
          pick(this.data, ['ApplyNo', 'Proposer', 'IDCard', 'YdReason', 'YDLX', 'XBZRK', 'XRJZFMJ'])
        )
        setTimeout(() => {
          this.form.setFieldsValue({
            XBZRK: this.data.XBZRK,
            XRJZFMJ: this.data.XRJZFMJ,
          })
        }, 0)
      })
    },
    close() {
      this.form.resetFields()
      this.$emit('update:visible', false)
      this.$emit('update:data', {})
    },
    handleCancel() {
      this.close()
      this.hanldeAfterClose()
    },
    handleOk() {
      this.form.validateFields((err, values) => {
        if (!err) {
          this.isSubmiting = true
          postYdsb({
            State: 'Alter',
            ydsb: {
              ID: this.data.ID,
              State: 'Alter',
              YDLX: values.YDLX,
              XBZRK: values.XBZRK,
              XRJZFMJ: values.XRJZFMJ,
              YdReason: values.YdReason,
            },
          })
            .then((res) => {
              this.$message.success('异动修改成功')
              this.close()
              this.$emit('change')
            })
            .finally(() => {
              this.isSubmiting = false
            })
        }
      })
    },
    hanldeAfterClose() {},
  },
}
</script>
<style lang="less" scoped></style>
